<script setup>
import { ref,onMounted } from 'vue'
import {queryAllApi } from '@/api/meun'

onMounted(() => {
  selectAll();
})
//列表数据
const handleClick = () => {
  console.log('click')
}
const selectAll=async()=>{
  const res=await queryAllApi();
  tableData.value = res.data;
  console.log(res.data)
}
const tableData = ref([])

//修改
const dialogFormVisible = ref(false)

</script>
<template>
  <!-- 头部 -->
<div class="container">
  <h1>菜单管理</h1>
  <el-button type="primary">+ 新增菜单</el-button>
</div>

//修改
<el-dialog v-model="dialogFormVisible" title="修改" width="500">
    <el-form :model="form">
      <el-form-item label="Promotion name" :label-width="formLabelWidth">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="Zones" :label-width="formLabelWidth">
        <el-select v-model="form.region" placeholder="Please select a zone">
          <el-option label="Zone No.1" value="shanghai" />
          <el-option label="Zone No.2" value="beijing" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          Confirm
        </el-button>
      </div>
    </template>
  </el-dialog>

<!-- table表格 -->
<div class="container">
<el-table :data="tableData" border style="width: 100%">
    <el-table-column type="index"  label="序号" width="150" align="center" />
    <el-table-column prop="title" label="菜单名" width="120" />
    <el-table-column prop="parentName" label="父组件名称" width="120" />
    <el-table-column prop="menuName" label="前端菜单名" width="120" />
    <el-table-column prop="path" label="路径" width="600" />
    <el-table-column label="图标" width="100">
      <template #default="{ row }">
        <div class="menu-icon">
          <component :is="row.icon" />
        </div>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default>
        <el-button link type="primary" size="small" @click="handleClick">
          修改
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div> 


</template>


<style scoped>
.container {
  margin: 15px 0px;
}

.menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon ::v-deep(svg) {
  width: 16px; /* 你可以调成 14px、16px，看效果 */
  height: 16px;
}

.el-table .el-table__cell {
  padding: 8px 0; /* 控制表格行的上下间距，让行不那么高 */
}
</style>